<template>
	<view class="body window">
		<view class="topLine" :style="{height: topBar+'px'}"></view>
		<view class="nav row_align_center" id="nav">
			<li :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
			<text class="title">{{title?title:''}}</text>
			<li class="iconfont icon-zuojiantou back hidden"></li>
		</view>
		<view class="data_body">
			<scroll-view class="scroll_list" scroll-y :style="{height:scrollHeight}">
				<!-- 教学科研情况 -->
				<view class="view_block">
					<view class="title">教学科研情况</view>
					<progress-bar :content="RankData" @updateRanking="updateRanking"></progress-bar>
				</view>
				<!-- 学历分布状况 -->
				<view class="view_block">
					<view class="title">学历分布状况
						<text class="font-small" style="color: #ccc;">(教职工)</text>
					</view>
					<pie-canvas :pieJson="ProductRateData" canvasId="aa" chartType="rose"></pie-canvas>
				</view>
				<!-- 学业成绩 -->
				<view class="view_block">
					<view class="title">学业成绩
						<text class="font-small" style="color: #ccc;">(班级)</text>
					</view>
					<radar-canvas :RadarModel="RadarModel"></radar-canvas>
				</view>
				<!-- 图书借阅情况 -->
				<view class="view_block">
					<view class="title">图书借阅情况</view>
					<text-block :content="friendTextBlock"></text-block>
					<panel-canvas :panelData="panelData"></panel-canvas>
					<mix-canvas :mixJson="friendTrand" canvasId="aa"></mix-canvas>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MixCanvas from "../../components/canvas/mix-canvas.vue"
	import ProgressBar from "../../components/progress-bar/progress-bar.vue"
	import PieCanvas from "../../components/canvas/pie-canvas.vue"
	import RadarCanvas from "../../components/canvas/radar-canvas.vue"
	
	import RankData from '../../static/json/school/1.json';
	import ProductRateData from '../../static/json/school/2.json';
	import RadarModel from '../../static/json/school/3.json';
	import friendTrand from '../../static/json/school/4.json';
	export default{
		components: {
			MixCanvas,ProgressBar,PieCanvas,RadarCanvas
		},  
		data() {
			return {
				info:this.$store.state.userInfo, //用户数据
				title: "智慧教育报表中心", //标题
				showDataTime: "today", //选中的时间
				tabCur: 0, //标签头下标
				topBar: 17, //导航高
				top: '180', //下拉栏位置
				scrollHeight:"600px", //数据展示体高度
				friendTrand,
				RankData,
				ProductRateData,
				RadarModel
			};
		},
		computed: {
			locationArray() {
				return [{value:"GDBJ-ENTRY-1",text:"天猫"},{value:"GDBJ-ENTRY-201",text:"京东"}];
			}
		},
		methods: {
			gotoBack() {
				this.$Common.navigateBack("/index/index");
			},
			//获取设备信息
			async getTelephoneInfo() {
				var telephoneInfo = await this.$Common.getTelephoneInfo();
				let hasHeight = 0;
				if (telephoneInfo.top >= 40) {
					this.top = telephoneInfo.statusBarHeight * 2 + 150;
					this.topBar = telephoneInfo.statusBarHeight;
				}
				// 设置滚动高度
				const query = wx.createSelectorQuery();
				query.select('#nav').boundingClientRect();
				query.exec(res=>{
					res.map((item, index)=>{
						hasHeight += item.height;
					})
					this.scrollHeight = (telephoneInfo.screenHeight - hasHeight-this.topBar) + 'px';
				})
			},
			updateRanking(nVal){
				this.RankData = nVal;
			},
		},
		onLoad() {
			//#ifndef H5
			uni.showShareMenu();
			//#endif
			this.getTelephoneInfo();
		}
	}
</script>

<style scoped lang="scss">
	.body{
		height: 100vh;
		margin: 0;
		padding: 0 20rpx;
		font-family: "montserrat";
		background-image: linear-gradient(125deg,#CB9FFE,#5894F7,#ABCDFA,#74A3F6,#CB9FFE);
		background-size: 400%;
		animation: bganimation 15s infinite;
	}
	page,body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.window{
		height: 100vh;
		overflow: hidden;
		.topLine{
			width: 100%;
		}
		
		scroll-view {
			box-sizing: border-box;
		}
		.swiper {
			box-sizing: border-box;
		}
		
		.nav {
			background-size: 100% 100%;
		
			.back {
				font-size: 54rpx;
				padding: 20rpx 14rpx 15rpx 14rpx;
				color:#fff;
			}
			.title {
				color: #fff;
				font-size: 30rpx;
				flex: 1;
				text-align: center;
			}
			.hidden {
				visibility: hidden;
			}
		}
		
		.head {
			padding: 0 16rpx 14rpx 16rpx;
			color: #fff;
			background-color: #40A2ED;
			justify-content: space-between;
			font-size:26rpx!important;
			.calendar_drag{
				width: 340rpx;
				display: flex;
				justify-content: center;
				align-items:center;
				
				.calendar_name{
					margin-right: 10rpx;
				}
				.icon-calendar{
					font-size:26rpx;
					margin-top:4rpx;
				}
			}
		}
		
		.data_body {
			overflow: auto;
			text-align: center;
			color: #333333;
			background-repeat: repeat;
			height: 100%;
			.scroll_list{
				height: 100%;
				.view_block{
					background-color: #fff;
					padding: 16rpx 20rpx 10rpx 20rpx;
					border-radius: 20rpx;
					margin-bottom: 40rpx;
					.title{
						text-align:left;
						margin-bottom: 30rpx;
						font-size: 30rpx;
					}
					.trend_title{
						text-align: right;
						font-size: 22rpx;
						color: #ff9900;
						margin-top: 50rpx;
					}
				}
			}
		}
	}
	@keyframes bganimation {
	  0%{
	    background-position: 0% 50%;
	  }
	  50%{
	    background-position: 100% 50%;
	  }
	  100%{
	    background-position: 0% 50%;
	  }
	}
</style>
